<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 100px;height: 100px;background-color: red;"></div>

    <!-- 和第一种方法一样 -->
    <div style="height: 100px;background-color: cyan;" onclick="console.log('a');"></div>
    <script>

        var div = document.getElementsByTagName('div')[0];
        console.log(div.onclick); // 不绑定默认为空
        // div.onclick = function() {
        //     console.log('a');
        // }
        // 点击会触发函数，不写函数，事件也会触发，只是没有函数可以执行

/////////////////////////////////////////////////////
        // 绑定事件处理函数，当事件触发时，执行函数

        //1. 兼容性很好， 又叫句柄绑定方式,和写在行间效果一样
        // div.onclick = function() {
        //     console.log('a');
        //     this.style.backgroundColor = "green";
        // }

        // div.onclick = function() { //  会覆盖上面的函数，点击变成蓝色
        //     console.log('a');
        //     this.style.backgroundColor = "#2299ff";
        // }
///////////////////////////////////////////////
     
        //2. w3c规定的，不兼容IE9以下
        // div.addEventListener(事件类型, 处理函数, false);

        // div.addEventListener('click', function(){
        //     console.log('b');
        // }, false);
        // div.addEventListener('click', function(){
        //     console.log('c');
        // }, false);// 一个事件绑定两个函数，按顺序触发两个函数


        div.addEventListener('click', test, false); // 函数执行返回undefined
        div.addEventListener('click', test, false); // 绑定的是一个函数，地址一样，所以只执行一次
        function test() {
            console.log('a');
        }


        // 3. IE独有的
        // div.attachEvent('on' + 事件类型, 处理函数);
        // 执行和addEventListener差不多，对于绑定的两个相同的函数，可以执行两次

        // div.attachEvent('onclick', function(){
        //     console.log('d');
        // });



    </script>
</body>
</html>